<template>
	<view class="point-detail" :class="{ 'active': isIphoneX }" :data-theme="themeStyle">
		<view class="detail-top">
			<block v-if="pointInfo.type == 2">
				<image class="adv-pic" :src="$util.img(pointInfo.image)?$util.img(pointInfo.image):$util.img('upload/uniapp/point/coupon.png')"  mode="aspectFit"></image>
			</block>
			<block v-else-if="pointInfo.type == 3">
				<image class="adv-pic" :src="$util.img(pointInfo.image)?$util.img(pointInfo.image):$util.img('upload/uniapp/point/hongbao.png')"  mode="aspectFit"></image>
			</block>
			<block v-else>
				<image class="adv-pic" :src="$util.img(pointInfo.image)" @error="imageError(index)" mode="aspectFit"></image>
			</block>
			<view class="detail-desc">
				<view class="desc-point ns-text-color">
					<view class="desc-point-left ns-text-color">
						<view class="desc-point-left-con ns-text-color">
							<text class="point-num">{{ pointInfo.point }}</text>
							<text>积分</text>
							<block v-if="pointInfo.price!='0.00'">
								<text>+￥</text>
								<text class="point-num">{{ pointInfo.price }}</text>
							</block>
						</view>
						<view class="ns-margin-left desc-point-left-oldPrice">
							<text>￥</text>
							<text>{{ pointInfo.market_price }}</text>
						</view>
					</view>
					<view class="desc-point-right ns-text-color-gary">
						<text>库存:</text>
						<text class="point-num">{{ pointInfo.stock }}</text>
					</view>
				</view>
				<view class="desc-name">{{ pointInfo.name }}</view>
			</view>
			<view class="coupon-desc">
				<text v-if="pointInfo.coupon_type == 'random'">无门槛优惠券</text>
				<text v-if="pointInfo.coupon_type == 'reward'">{{ '满' + pointInfo.at_least + '减' + pointInfo.money }}</text>
				<text v-if="pointInfo.coupon_type == 'discount'">满{{ pointInfo.at_least }}元<text>{{pointInfo.discount}}折</text></text>
				<text v-if="pointInfo.coupon_type == 'discount'">最多优惠{{pointInfo.discount_limit}}元</text>
				<text class="time" v-if="pointInfo.coupon_type">
					{{ pointInfo.validity_type == 1 ? '领取之日起' + pointInfo.fixed_term + '天内有效' : $util.timeStampTurnTime(pointInfo.end_time) + '到期' }}
				</text>
			</view>
		</view>

		<view class="detail-content" v-if="pointInfo.content">
			<view class="content-title">
				<text>兑换详情</text>
			</view>
			<rich-text :nodes="pointInfo.content"></rich-text>
		</view>
		<view class="detail-swap" @click="login()" :class="{ 'position-bottom': isIphoneX }" v-if="!isLogin">
			<button type="primary" class="btn-disabled">登录之后方可兑换</button>
		</view>
		<view class="detail-swap" @click="makeSure()" :class="{ 'position-bottom': isIphoneX }" v-else>
			<button type="primary" hover-class="none" style="height: 75upx; background:linear-gradient(270deg, #ff5a01, #ffb644);"> 兑换</button>
		</view>
		<!-- 弹出规则 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="pointPopup" type="bottom">
				<view class="tips-layer">
					<view class="tips-layer-info">
						<view class="info-img">
							<block v-if="pointInfo.type == 2">
								<image :src="$util.img(pointInfo.image)?$util.img(pointInfo.image):$util.img('upload/uniapp/point/coupon.png')"  mode="aspectFit"></image>
							
							</block>
							<block v-else-if="pointInfo.type == 3">
								<image :src="$util.img(pointInfo.image)?$util.img(pointInfo.image):$util.img('upload/uniapp/point/hongbao.png')"  mode="aspectFit"></image>
							
							</block>
							<block v-else>
								<image :src="$util.img(pointInfo.image)" @error="imageError(index)"  mode="aspectFit"></image>
							</block>
						</view>
						<view class="info-desc">
							<view class="desc-name">{{ pointInfo.name }}</view>
							<view class="desc-con">
								<text>库存:</text>
								<text class="ns-text-color">{{ pointInfo.stock }}</text>
							</view>
							<view class="desc-con">
								<text>积分:</text>
								<text class="ns-text-color">{{ pointInfo.point }}</text>
								<block v-if="pointInfo.price != '0.00'">
									<text class="ns-text-color">+￥</text>
									<text class="point-num ns-text-color">{{ pointInfo.price }}</text>
								</block>
							</view>
						</view>
					</view>
					<view class="tips-layer-item">
						<text>兑换数量<text class="limit_num">{{pointInfo.limit_num? '（兑换上限'+pointInfo.limit_num+'件）':''}}</text></text>
						<uni-number-box :min="1" :max="pointInfo.limit_num" :value="number" @change="numChange($event, {})"></uni-number-box>
					</view>
					<view class="footer" :class="{ 'position-bottom': isIphoneX }"><button type="primary"style="height: 75upx; background:linear-gradient(270deg, #ff5a01, #ffb644);" @click="confirm()" hover-class="none">确定</button></view>

					<view class="close iconfont iconclose" @click="close()"></view>
				</view>
			</uni-popup>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
		<ns-show-toast></ns-show-toast>
	</view>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import htmlParser from '@/common/js/html-parser';
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		components: {
			uniPopup,
			uniNumberBox,
			nsShowToast
		},
		data() {
			return {
				id: 0,
				pointInfo: {
					image: ''
				},
				isIphoneX: false, //判断手机是否是iphoneX以上
				isLogin: false,
				number: 1
			};
		},
		mixins: [globalConfig],
		onLoad(options) {
			this.isIphoneX = this.$util.uniappIsIPhoneX()
			if (options.id) {
				this.id = options.id;
			} else {
				this.$util.redirectTo('/promotionpages/point/list/list', {}, 'redirectTo');
			}
			this.getPointInfo();
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		methods: {
			//获取个人积分信息
			getAccountInfo(e, f) {
				if (uni.getStorageSync('token')) {
					this.$api.sendRequest({
						url: '/api/memberaccount/info',
						data: {
							account_type: 'point'
						},
						success: res => {
							if (res.code == 0 && res.data) {
								this.isLogin = true;
								let point_num = Math.floor(parseInt(res.data.point) / f);
								if (e >= point_num) {
									this.Max = point_num;
								} else {
									this.Max = e;
								}
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
				} else {
					this.isLogin = false;
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			},
			//获取该详情
			getPointInfo() {
				this.$api.sendRequest({
					url: '/pointexchange/api/goods/detail',
					data: {
						id: this.id
					},
					success: res => {
						if ( res.data.length !== 0 ) {
							this.pointInfo = res.data;
							if (this.pointInfo.content) this.pointInfo.content = htmlParser(this.pointInfo.content);
							uni.setNavigationBarTitle({
								title: this.pointInfo.name
							});
							let save = this.pointInfo.type == 2 ? this.pointInfo.count : this.pointInfo.stock;
							let point = this.pointInfo.point;
							this.getAccountInfo(save, point);
						} else {
							this.$util.showToast({
								title:"优惠券已过期"
							})
							this.$util.redirectTo('/promotionpages/point/list/list', {}, 'redirectTo');
						}
					}
				});
			},
			// 打开积分说明弹出层
			openPointPopup() {
				this.$refs.pointPopup.open();
			},
			close() {
				this.$refs.pointPopup.close();
			},
			numChange(num, params) {
				if (num < 1) num = 1;
				this.number = num;
			},
			//确认兑换后执行操作
			confirm() {
				// 删除待付款物流方式缓存
				uni.removeStorageSync('delivery');
				var data = {
					id: this.id,
					num: this.number
				};

				uni.setStorage({
					key: 'exchangeOrderCreateData',
					data: data,
					success: () => {
						if (!uni.getStorageSync('token')) {
							this.$refs.login.open('/promotionpages/point/payment/payment');
							return;
						}
						this.$util.redirectTo('/promotionpages/point/payment/payment');
					}
				});
			},
			//登录
			login() {
				this.$refs.login.open('/promotionpages/point/detail/detail?id=' + this.id);
			},
			//点击去兑换
			makeSure() {
				this.openPointPopup();
			},
			imageError() {
				this.pointInfo.image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			}
		}
	};
</script>

<style lang="scss">
	.top-content-right-active {
		color: #898989 !important;
	}
	.point-detail {
		padding-bottom: 110rpx;

		.detail-top {
			width: 100%;
			background: #ffffff;
			padding-bottom: $ns-padding;

			.adv-pic {
				width: 100%;
				display: block;
			}

			.detail-desc {
				width: 100%;
				// height: 80rpx;
				background: #ffffff;
				padding: $ns-padding $ns-padding 0;
				box-sizing: border-box;

				.desc-name {
					width: 100%;
					height: 100%;
					font-size: $ns-font-size-lg;
				}

				.desc-point {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100%;

					.desc-point-left {
						display: flex;
						align-items: flex-end;

						.desc-point-left-con {
							font-weight: 700;
							font-size: $ns-font-size-x-lg;
							line-height: 1;
						}

						.desc-point-left-oldPrice {
							color: $ns-text-color-gray;
							text-decoration: line-through;
							font-size: $ns-font-size-base;
							line-height: 1;
						}
					}

					.desc-point-right {
						color: $ns-text-color-gray;
					}
				}
			}

			.coupon-desc {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 $ns-padding;
				box-sizing: border-box;
			}
		}

		.detail-content {
			width: 100%;
			padding: $ns-padding;
			box-sizing: border-box;
			padding-bottom: 80rpx;
			margin-top: $ns-margin;
			background: #ffffff;

			.content-title {
				width: 100%;
				text-align: center;
				font-size: $ns-font-size-x-lg;
			}
		}

		.detail-swap {
			box-sizing: border-box;
			background: #ffffff;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 20rpx 0;

			// button {
			// 	width: 100%;
			// 	margin: 0;
			// 	border-radius: 0;
			// }

			// button::after {
			// 	border: none;
			// 	border-radius: 0;
			// }

			// button.active {
			// 	background: #cccccc !important;
			// }
		}
	}

	.point-detail.active {
		padding-bottom: 1780rpx;
	}

	.tips-layer {
		width: 100%;
		height: 500rpx;
		background: #ffffff;
		border-top-left-radius: $ns-border-radius;
		border-top-right-radius: $ns-border-radius;
		position: relative;
		padding-top: $ns-padding;
		box-sizing: border-box;

		.tips-layer-info {
			width: 100%;
			height: 200rpx;
			padding: $ns-padding;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.info-img {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid $ns-border-color-gray;
				box-sizing: border-box;
				border-radius: $ns-border-radius;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-desc {
				width: calc(100% - 170rpx);
				height: 150rpx;

				.desc-name {
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: $ns-font-size-x-lg;
					font-weight: 700;
				}

				.desc-con {}
			}
		}

		.tips-layer-item {
			width: 100%;
			height: 80rpx;
			padding: 0 $ns-padding;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.limit_num{
				color:#898989
			}
		}

		.close {
			position: absolute;
			right: 20rpx;
			top: 0rpx;
			font-size: 40rpx;
		}

		.footer {
			margin: 0;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			width: 100%;
			position: absolute;
			bottom: 0;
			color: #fff;
			z-index: 1;
			border-radius: 0;
		}

		.footer.disabled {
			cursor: not-allowed !important;
			pointer-events: none !important;
			opacity: 0.5 !important;
			box-shadow: none !important;
			filter: grayscale(100%);
		}
	}

	.position-bottom {
		padding-bottom: 68rpx !important;
	}
</style>
